<template>
  <div
      ref="draggable"
      style="
      z-index: 9999;
      left: 40px;
      top: 50px;
      width: 800px;
      position: absolute;
      background: #ffffff;
      padding: 20px 10px;
      cursor: move;
      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    "
      @mousedown="dragMouseDown"
  >
    <div
        class="resize-handle bottom-right"
        @mousedown.stop="resizeMouseDown('bottom-right', $event)"
    ></div>
    <div
        class="resize-handle bottom-left"
        @mousedown.stop="resizeMouseDown('bottom-left', $event)"
    ></div>
    <div
        class="resize-handle top-right"
        @mousedown.stop="resizeMouseDown('top-right', $event)"
    ></div>
    <div
        class="resize-handle top-left"
        @mousedown.stop="resizeMouseDown('top-left', $event)"
    ></div>
    <!--    <div class="modal-content incoming-call-dialog" v-show="callshowModel">-->
    <!--      <div class="usr-info">-->
    <!--        <img class="usr-pho" :src="callerPhoto" alt="Caller Photo" />-->
    <!--        <p class="usr-name">{{ callerName }}</p>-->
    <!--        <p class="incoming-call-tip">邀请您通话</p>-->
    <!--      </div>-->
    <!--      <div class="op-btns">-->
    <!--        <div class="incoming-call-reject">-->
    <!--          <img-->
    <!--            @click="rejectCall"-->
    <!--            src="https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661433175110/reject.png"-->
    <!--            alt="Reject Call"-->
    <!--          />-->
    <!--          <p class="op-txt">挂断</p>-->
    <!--        </div>-->
    <!--        <div class="incoming-call-video">-->
    <!--          <img-->
    <!--            @click="answerCall(0)"-->
    <!--            src="https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661433226356/videoCall.png"-->
    <!--            alt="Video Call"-->
    <!--          />-->
    <!--          <p class="op-txt">视频通话</p>-->
    <!--        </div>-->
    <!--        <div class="incoming-call-audio">-->
    <!--          <img-->
    <!--            @click="answerCall(1)"-->
    <!--            src="https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661433255465/audioCall.png"-->
    <!--            alt="Audio Call"-->
    <!--          />-->
    <!--          <p class="op-txt">语音通话</p>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <div
        class="modal-content outing-call-dialog"
        style="background: #3c3667; padding: 20px"
        v-show="showModel"
    >
      <div class="peer-info">
        <img class="peer-pho" :src="peerPhoto" alt="Peer Photo" />
        <p class="peer-name">{{ peerName }}</p>
        <p class="outing-call-tip">
          设备正在响铃中，请不要挂断...
        </p>
      </div>
      <div class="op-btns">
        <div class="out-call-mode" @click="changeMode">
          <div v-if="callMode == duerRtcSdk.CallMode.AUDIO_VIDEO">
            <img :src="audioCallIcon" alt="Call Mode" />
          </div>

          <div v-else>
            <img :src="videoCallIcon" alt="Call Mode" />
          </div>

          <p
              class="out-call-mode-txt"
              style="text-align: center; color: #ffffff"
          >
            {{
              textMode === duerRtcSdk.CallMode.AUDIO_VIDEO
                  ? "语音通话"
                  : "视频通话"
            }}
          </p>
        </div>
        <div @click="dropCall">
          <img
              src="https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661433175110/reject.png"
              alt="Reject Call"
          />
          <p style="color: #e24940; text-align: center">挂断</p>
        </div>
      </div>
    </div>

    <div
        id="call-view"
        style="padding: 20px 0; height: 500px"
        v-show="callView"
    >
      <div
          :class="['peer-view', peerViewClass]"
          @click="switchToMainView('peer')"
      >
        <video
            id="video-peer"
            autoPlay
            v-show="videoPeerShow"
            ref="videoPeer"
        ></video>
        <audio
            id="audio-peer"
            autoPlay
            v-show="audioPeerShow"
            ref="audioPeer"
        ></audio>
        <div class="audio-tip-wrap" v-show="audioTip">
          <!--          <p class="audio-name online-ellipsis">对端姓名</p>-->
          <p class="audio-call">语音通话中</p>
        </div>
      </div>
      <div
          :class="['local-view', localViewClass]"
          @click="switchToMainView('local')"
      >
        <video
            id="video-local"
            autoPlay
            ref="videoLocal"
            v-show="videoLocalShow"
        ></video>
        <audio id="audio-local" autoPlay ref="audioLocal"></audio>
        <div class="audio-tip-wrap" v-show="audioTip">
          <p class="audio-name online-ellipsis">本机</p>
          <p class="audio-call">语音通话中</p>
        </div>
      </div>
      <div class="op-btns" style="position: absolute; bottom: 100px">
        <div class="mute-change-btn" @click="changeMute">
          <img :src="muteUrl" />
          <p class="a-mute">{{ muteText }}</p>
        </div>
        <!-- <div>
            <img
                onclick="changeAudioMute"
                src="https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661515279209/quite.png"
            >
            <p class="a-mute">已静音</p>
        </div> -->
        <div class="mode-change-btn" @click="changeMode">
          <img :src="videoCallUrl" />
          <p class="v-mode">{{ videoCallText }}</p>
        </div>
        <!-- <div>
            <img
                onclick="changeMode"
                src="https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661515364706/audio000.png"
            >
            <p>语音通话</p>
        </div> -->
        <div @click="dropCall">
          <img
              src="https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661433175110/reject.png"
          />
          <p style="color: #e24940">挂断</p>
        </div>
      </div>
    </div>
    <audio id="ring-music" loop ref="audioPlayer">
      <source
          src="https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-9/1662024495462/ring_new.mp3"
          type="audio/mpeg"
      />
    </audio>
    <div
        class="alert alert-warning fade in"
        v-if="showText"
        id="message-alert"
        style="
        text-align: center;
        padding: 20px;
        background: #3c3667;
        color: #ffffff;
      "
    >
      <a href="#" class="close" data-dismiss="alert"> &times; </a>
      <span class="call-message">呼叫超时，请稍后再试</span>
    </div>
  </div>
</template>
<script setup name="dialog">
import "./index";
import {ref} from "vue";

const height = ref("500px");
const duerRtcSdk = window.DUER_rtcsdk;
import useUserStore from "@/store/modules/user";
import moment from "moment";
import {callRecordSave, getTokenDueros, getDeviceInfo} from "@/api/smartSpeaker"
// const CallMode = {
//   AUDIO_VIDEO: 'AUDIO_VIDEO',
//   AUDIO_ONLY: 'AUDIO_ONLY',
// };
const {homeApplyId, homeApplyName, imei} = defineProps([
  "homeApplyId",
  "homeApplyName",
  "imei",
]);
const callMode = ref(duerRtcSdk.CallMode.AUDIO_VIDEO);
const textMode = ref(duerRtcSdk.CallMode.AUDIO_VIDEO);

const enbaleRtcDebugLog = true;
const duerRtc = ref(null);
const showText = ref(false);
const customer = null;
const emits = defineEmits("closed");
const callView = ref(false);
const callInfo = ref({
  mute: false,
  mode: duerRtcSdk.CallMode.AUDIO_VIDEO,
});

//// duerRtcSdk.CallMode.AUDIO_VIDEO 0 视频  duerRtcSdk.CallMode.AUDIO_ONLY//1 语音
const audioPlayer = ref(null);
const callerName = ref("未知来电");
const callerPhoto =
    "https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-7/1658388218664/pho.png";

const peerName = ref("被叫名字");
const peerPhoto = ref(
    "https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-7/1658388218664/pho.png",
);

const videoCallIcon = ref(
    "https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661433226356/videoCall.png",
);
const audioCallIcon = ref(
    "https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661515364706/audio000.png",
);

const muteUrl = ref(
    "https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661515279806/quite0.png",
);
const muteText = ref("静音");
const videoCallUrl = ref(
    "https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661433226356/videoCall.png",
);
const videoCallText = ref("视频通话");
const audioTip = ref(false);
const videoPeer = ref(null);
const audioPeer = ref(null);
const videoPeerShow = ref(true);
const audioPeerShow = ref(true);
const videoLocal = ref(null);
const audioLocal = ref(null);
const videoLocalShow = ref(true);
const form = ref({});
const token = ref('')

const showModel = ref(true); //呼叫DIV

const peerViewClass = ref("main-view");
const localViewClass = ref("sub-view");

const draggable = ref(null);
let pos1 = 0,
    pos2 = 0,
    pos3 = 0,
    pos4 = 0;

const switchToMainView = (view) => {
  if (view === "peer" && peerViewClass.value !== "main-view") {
    peerViewClass.value = "main-view";
    localViewClass.value = "sub-view";
  } else if (view === "local" && localViewClass.value !== "main-view") {
    localViewClass.value = "main-view";
    peerViewClass.value = "sub-view";
  }
};
const dragMouseDown = (e) => {
  e.preventDefault();
  pos3 = e.clientX;
  pos4 = e.clientY;
  document.onmouseup = closeDragElement;
  document.onmousemove = elementDrag;
}

const elementDrag = (e) => {
  e.preventDefault();
  pos1 = pos3 - e.clientX;
  pos2 = pos4 - e.clientY;
  pos3 = e.clientX;
  pos4 = e.clientY;
  if (draggable.value) {
    draggable.value.style.top = draggable.value.offsetTop - pos2 + "px";
    draggable.value.style.left = draggable.value.offsetLeft - pos1 + "px";
  }
};

const closeDragElement = () => {
  document.onmouseup = null;
  document.onmousemove = null;
}
const closeResizeElement = () => {
  document.onmouseup = null;
  document.onmousemove = null;
}
const resizeMouseDown = (corner, e) => {
  e.preventDefault();
  pos3 = e.clientX;
  pos4 = e.clientY;
  document.onmouseup = closeResizeElement;
  document.onmousemove = (event) => elementResize(event, corner);
}

const elementResize = (e, corner) => {
  e.preventDefault();
  pos1 = pos3 - e.clientX;
  pos2 = pos4 - e.clientY;
  pos3 = e.clientX;
  pos4 = e.clientY;

  if (draggable.value) {
    const el = draggable.value;
    switch (corner) {
      case "bottom-right":
        el.style.width = el.offsetWidth - pos1 + "px";
        el.style.height = el.offsetHeight - pos2 + "px";
        break
      case 'bottom-left':
        el.style.width = el.offsetWidth + pos1 + "px";
        el.style.height = el.offsetHeight - pos2 + "px";
        el.style.left = el.offsetLeft - pos1 + "px";
        break
      case 'top-right':
        el.style.width = el.offsetWidth - pos1 + "px";
        el.style.height = el.offsetHeight + pos2 + "px";
        el.style.top = el.offsetTop - pos2 + "px";
        break;
      case 'top-left':
        el.style.width = el.offsetWidth + pos1 + "px";
        el.style.height = el.offsetHeight + pos2 + "px";
        el.style.left = el.offsetLeft - pos1 + "px";
        el.style.top = el.offsetTop - pos2 + "px";
        break
    }
  }
};

//小度

// function incomingViewShow() {
//   useUserStore().screen = true
//   showModel.value = true;
//
//   if (audioPlayer.value) {
//     audioPlayer.value.play();
//   }
// }
function ringViewShow() {
  // $('#ring-music').get(0).play();

  if (audioPlayer.value) {
    audioPlayer.value.play();
  }
  peerName.value = homeApplyName;
  if (callInfo.value.callMode == duerRtcSdk.CallMode.AUDIO_VIDEO) {
    // 当前为视频通话
    textMode.value = duerRtcSdk.CallMode.AUDIO_ONLY;
    // videoCallIcon.value =
    ("https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661515364706/audio000.png");
  } else if (callInfo.value.callMode == duerRtcSdk.CallMode.AUDIO_ONLY) {
    audioCallIcon.value =
        "https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661828922567/videoCall0.png";
  }
  textMode.value = duerRtcSdk.CallMode.AUDIO_VIDEO;
}

function freeCallView() {
  if (audioPlayer.value) {
    audioPlayer.value.pause();
  }
  Object.assign(callInfo, {
    mute: false,
  });
  console.log("errreo我也走了");
  if (form.value.callStatus == 1) {
    form.value.endCallTime = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
    form.value.duration = calculateTimeDifference(
        form.value.answerCallTime,
        form.value.endCallTime,
    )
  }
  callSave(form.value);
  console.log(emits("closed", false));
}

function callTimeout() {
  showText.value = true;
  // callSave(form.value)
  setTimeout(function () {
    emits("closed", false);
  }, 1000);
}

function changeMute() {
  if (callInfo.value.mute) {
    muteUrl.value =
        "https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661515279806/quite0.png";
    muteText.value = "静音";
  } else {
    muteUrl.value =
        "https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661515279209/quite.png";
    muteText.value = "已静音";
  }
  callInfo.value.mute = !callInfo.value.mute;
  duerRtc.value.muteAudio(callInfo.value.mute);
}

function callViewShow() {
  if (audioPlayer.value) {
    audioPlayer.value.pause();
  }
  if (callInfo.value.mute) {
    // 已静音

    muteUrl.value =
        "https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661515279209/quite.png";
    muteText.value = "已静音";
  } else {
    muteUrl.value =
        "https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661515279806/quite0.png";
    muteText.value = "静音";
  }
  if (callInfo.value.callMode == duerRtcSdk.CallMode.AUDIO_VIDEO) {
    // 当前为视频通话
    videoCallUrl.value =
        "https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661515364706/audio000.png";
    videoCallText.value = "语音通话";
    audioTip.value = false;
  } else if (callInfo.value.callMode == duerRtcSdk.CallMode.AUDIO_ONLY) {
    videoCallUrl.value =
        "https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661828922567/videoCall0.png";
    videoCallText.value = "视频通话";
    audioTip.value = true;
  }
  showModel.value = false;
  callView.value = true;
  form.value.callStatus = 1;
  form.value.answerCallTime = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
  // $('#call-view').show();
}

function setLayouts(layouts) {
  if (!layouts) {
    return;
  }

  // const audioLocal = document.getElementById("audio-local");
  // const videoLocal = document.getElementById("video-local");
  // const audioPeer = document.getElementById("audio-peer");
  // const videoPeer = document.getElementById("video-peer");
  // const videoLocal = ref(null);
  // const audioLocal = ref(null);
  // const videoLocalShow = ref(true);
  const [layoutLocal, layoutPeer] = layouts;
  //
  console.error("layoutLocal", layoutLocal);

  if (layoutLocal.videoTrack) {
    videoLocalShow.value = true;
    audioTip.value = false;
    const stream = new MediaStream();
    stream.addTrack(layoutLocal.videoTrack);
    videoLocal.value.srcObject = stream;
  } else {
    videoLocalShow.value = false;
    audioTip.value = true;
  }
  if (layoutLocal.audioTrack && !layoutLocal.isLocal) {
    const stream = new MediaStream();
    stream.addTrack(layoutLocal.audioTrack);
    audioLocal.value.srcObject = stream;
  }

  if (layoutPeer.videoTrack) {
    videoPeerShow.value = true;
    audioTip.value = false;
    const stream = new MediaStream();
    stream.addTrack(layoutPeer.videoTrack);
    videoPeer.value.srcObject = stream;
  } else {
    videoPeerShow.value = false;
    audioTip.value = true;
  }
  if (layoutPeer.audioTrack) {
    const stream = new MediaStream();
    stream.addTrack(layoutPeer.audioTrack);
    audioPeer.value.srcObject = stream;
  }
}

const rtcListener = (loginParams) => {
  console.log("duerRtcSdk", duerRtcSdk, new duerRtcSdk.RtcContext());
  duerRtc.value = new duerRtcSdk.RtcContext(
      {
        onAuthStatusChanged: (auth) => {
          if (auth.success) {
            console.log("auth.success");
            // 自动或手动入席离席只能二选一，不能混用！！！
            // 开启自动入席离席
            duerRtc.value.enableCustomer(true);
            // 开启手动入席离席
            // customer = duerRtc.enableCustomer(false);
            // customer.join();
            // this.setState({ isLogin: true })
          } else {
            switch (auth.code) {
              case duerRtcSdk.AuthCode.PARAM_ERROR:
              case duerRtcSdk.AuthCode.APPID_INVALID: {
                // 联调阶段可能遇到的错误
                break;
              }
              case duerRtcSdk.AuthCode.TOKEN_INVALID:
              case duerRtcSdk.AuthCode.TOKEN_EXPIRED: {
                // 重新刷新token
                break;
              }
              case duerRtcSdk.AuthCode.NO_ERROR:
              case duerRtcSdk.AuthCode.OTHER_DEVICE_LOGIN: {
                break
              }
            }
          }
        },
      },
      enbaleRtcDebugLog,
  );

  duerRtc.value.setCallListener({
    onIncomingCall: (intent) => {
      console.log("222222222222222222222222intent", intent);
      const serviceInfo =
          (intent.serviceInfo && JSON.parse(intent.serviceInfo)) || {};
      console.error("【 serviceInfo 】", serviceInfo);

      intent.serviceInfo = serviceInfo;
      Object.assign(callInfo.value, intent);
      console.log("onIncomingCall", intent);
      // incomingViewShow();
    },
    onAddConfereeStateChanged: (state) => {
      console.log("onAddConfereeStateChanged", state);
    },
    onCallReplaced: (replaced) => {
      console.log("onCallReplaced", replaced);
    },
    onCallStateChanged: (stateInfo) => {
      console.error(stateInfo, "stateInfo");
      if (stateInfo.state === duerRtcSdk.CallState.RINGBACK) {
        // 被叫开始响铃
        ringViewShow();
      } else if (stateInfo.state === duerRtcSdk.CallState.DISCONNECTED) {
        // 通话已经断开
        freeCallView();
        if (stateInfo.reason === duerRtcSdk.CallReason.TIMEOUT) {
          // 呼叫超时
          callTimeout();
        }
      } else if (stateInfo.state === duerRtcSdk.CallState.CONNECTED) {
        // 通话被正常接听
        callViewShow();
      }
      console.log("onCallStateChanged", stateInfo);
    },
    onConfereeLayout: (layouts) => {
      console.log("onConfereeLayout", layouts);
      setLayouts(layouts);
    },
    onRecordStateChanged: (recordStateInfo) => {
      console.log("onRecordStateChanged", recordStateInfo);
    },
  });

  duerRtc.value.setConnectListener({
    onConnectionChanged: (conn) => {
      if (conn === 2) {
        // 长链接已建立
        console.log("建立连接了");
      }
      if (conn === 3) {
        // 长链接已断开
        duerRtc.value = null;
      }
      console.log("onConnectionChanged", conn);
    },
  });

  duerRtc.value.setMediaDeviceListener({
    // 麦克风/摄像头状态
    onMediaDeviceStateChanged: (device, state, error) => {
      console.error("onMediaDeviceStateChanged", device, state, error);
    },
  });
  rtcConnect(loginParams, duerRtc.value);
}

const rtcConnect = (loginParams, duerRtc) => {
  const {uid, appId} = loginParams;
  const uri = new duerRtcSdk.CallUri(uid, appId);
  loginParams.uri = uri;
  duerRtc.login(loginParams);
}

const handleLogin = (event) => {
  const loginParams = {
    // 从表单获取登录参数
    appId: "dc8ca706",
    uid: "13063863745",
    token: token.value,
    appName: homeApplyName,
  };
  rtcListener(loginParams);
}

async function getToken() {
  let obj = {
    appId: "dc8ca706",
    uid: "13063863745",
  }
  const data = await getTokenDueros(obj)
  token.value = data.token
  handleLogin();
}

function deviceInfo() {
  getDeviceInfo(imei).then(res => {
    makeCall("a91b7a09", "100599667273@HARD", duerRtcSdk.CallMode.AUDIO_VIDEO);
  })
}

setTimeout(function () {
  // deviceInfo()
  makeCall("a91b7a09", "100599667273@HARD", duerRtcSdk.CallMode.AUDIO_VIDEO);
}, 1000);
const makeCall = (
    appId,
    uid,
    callMode,
    callerRole = duerRtcSdk.CallerRole.CALL_CENTER,
) => {
  const calleeUri = new duerRtcSdk.CallUri(uid, appId);
  const intent = duerRtcSdk.MakeCallIntent(
      calleeUri,
      duerRtcSdk.CallMode.AUDIO_VIDEO,
  );
  callMode && (intent.callMode = callMode);
  callerRole && (intent.callerRole = callerRole);
  callInfo.value.callMode = callMode;
  const result = duerRtc.value.makeCall(intent);
  form.value.homeBedApplyId = homeApplyId;
  form.value.callTime = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
  form.value.callType = 0;
  form.value.callStatus = 0;
  form.value.imei = imei;
  //
  if (duerRtcSdk.CallReason.NORMAL == result) {
    // 呼出成功
  } else if (
      duerRtcSdk.CallReason.ALREADY_IN_CALL == result ||
      CallReason.EXCEPTION_INPUT_ILLEGAL == result
  ) {
    console.error("makeCall resaon", duerRtcSdk.CallReasonMap.get(result));
  } else {
    // 其他原因，目前不会出现
    console.warn("makeCall res", result);
  }
};


// duerRtcSdk.CallMode.AUDIO_VIDEO 0 视频  duerRtcSdk.CallMode.AUDIO_ONLY//1
// const rejectCall = () => {
//   // handle call rejection logic here
//   duerRtc.value.rejectIncomingCall(
//     callInfo.value.index,
//     "REJECT_CALL_USER_REASON",
//   );
// };
//
// const answerCall = (mode) => {
//   // handle call answering logic here
//   duerRtc.value.answerCall(callInfo.value.index, mode, false);
//   callInfo.value.callMode = mode;
// };
const changeMode = () => {
  const mode =
      callInfo.value.callMode == duerRtcSdk.CallMode.AUDIO_VIDEO
          ? duerRtcSdk.CallMode.AUDIO_ONLY
          : duerRtcSdk.CallMode.AUDIO_VIDEO;

  if (mode == duerRtcSdk.CallMode.AUDIO_VIDEO) {
    console.error("视频");
    textMode.value = duerRtcSdk.CallMode.AUDIO_VIDEO;
    callMode.value = duerRtcSdk.CallMode.AUDIO_VIDEO;
    videoCallUrl.value =
        "https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661515364706/audio000.png";
    videoCallText.value = "语音通话";
  } else if (mode == duerRtcSdk.CallMode.AUDIO_ONLY) {
    textMode.value = duerRtcSdk.CallMode.AUDIO_ONLY;
    callMode.value = duerRtcSdk.CallMode.AUDIO_ONLY;
    console.error("语音");

    videoCallUrl.value =
        "https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661828922567/videoCall0.png";
    videoCallText.value = "视频通话";
  }
  duerRtc.value.changeCallMode(mode);
  callInfo.value.callMode = mode;
}

const dropCall = () => {
  // 处理挂断逻辑
  duerRtc.value.dropCall("DROP_CALL_USER_REASON");
};

function calculateTimeDifference(startTime, endTime) {
  // 将时间字符串转换为Date对象
  const startDate = new Date(startTime.replace(/-/g, "/"));
  const endDate = new Date(endTime.replace(/-/g, "/"));

  // 计算两个时间之间的毫秒数
  const diffMs = endDate - startDate;

  // 计算总的秒数
  let totalSeconds = Math.floor(diffMs / 1000);

  // 计算小时、分钟和秒数
  const hours = Math.floor(totalSeconds / 3600);
  totalSeconds %= 3600;
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;

  // 构建时间差字符串
  let result = "";
  if (hours > 0) {
    result += `${hours}小时`;
  }
  if (minutes > 0) {
    result += `${minutes}分`;
  }
  if (seconds > 0 || result === "") {
    // 显示秒数或者保证至少显示 "0秒"
    result += `${seconds}秒`;
  }

  return result;
}

async function callSave(data) {
  await callRecordSave(data);
}
</script>

<style scoped>
.usr-info {
  text-align: center;
}

.usr-pho {
  margin-top: 35px;
  width: 120px;
  height: 120px;
}

.usr-name {
  margin-top: 10px;
  font-weight: 500;
  font-size: 30px;
  line-height: 42px;
  color: #1a1a1a;
}

.incoming-call-tip {
  font-size: 16px;
  line-height: 22px;
  color: #666666;
}

.peer-info {
  text-align: center;
}

.op-btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.op-btns img {
  width: 80px;
  height: 80px;
  margin: 16px 40px;
  cursor: pointer;
}

.op-txt {
  line-height: 20px;
  text-align: center;
}

.peer-pho {
  width: 104px;
  height: 104px;
  margin-top: 50px;
}

.peer-name {
  font-size: 60px;
  line-height: 86px;
  color: #ffffff;
}

.outing-call-tip {
  font-size: 42px;
  line-height: 60px;
  color: rgba(225, 225, 225, 0.5);
}

#call-view {
  position: relative;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10052;
  background: #3c3667;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.main-view video {
  width: 100%;
  object-fit: fill;
}

.main-view .audio-name {
  margin-top: 100px;
  font-size: 62px;
  line-height: 87px;
}

.main-view .audio-call {
  font-size: 36px;
  line-height: 50px;
  color: rgba(225, 225, 225, 0.5);
  margin-top: 100px;
  margin-left: 70px;
}

.main-view .audio-tip-wrap {
  position: absolute;
  top: 0;
}

.sub-view {
  width: 280px;
  height: 162px;
  position: absolute;
  left: 48px;
  top: 48px;
  background-image: url("https://dumi-dueros-bj-tob.cdn.bcebos.com/amis/2022-8/1661773897681/audioBg.png");
  background-repeat: no-repeat;
  background-size: 100%;
  color: #fff;
  z-index: 1;
}

.sub-view video {
  width: 320px;
  height: 192px;
  object-fit: fill;
}

.sub-view .audio-tip-wrap {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.sub-view .audio-name {
  font-size: 40px;
  line-height: 67px;
  max-width: 300px;
}

.sub-view .audio-call {
  font-size: 24px;
  line-height: 34px;
  text-align: right;
}

.resize-handle {
  width: 10px;
  height: 10px;
  background: #fff;
  position: absolute;
  cursor: pointer;
}

.resize-handle.bottom-right {
  right: 0;
  bottom: 0;
  cursor: se-resize;
}

.resize-handle.bottom-left {
  left: 0;
  bottom: 0;
  cursor: sw-resize;
}

.resize-handle.top-right {
  right: 0;
  top: 0;
  cursor: ne-resize;
}

.resize-handle.top-left {
  left: 0;
  top: 0;
  cursor: nw-resize;
}
</style>
